<%--
  Created by IntelliJ IDEA.
  User: Mr.King
  Date: 2017/3/6
  Time: 19:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>easyui</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
    <!-- 引入ztree资源文件 -->
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css" type="text/css">
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>

    <%--一键上传--%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ocupload-1.1.2.js"></script>

    <script type="text/javascript">
        $(function () {
            /*$.messager.show({
                title : "6的一批",
                msg : "6666666666",
                timeout : 2000,
                showType : 'slide'
            });*/
//            $.messager.alert("6的不行", "555555555","question");

            /*$.messager.confirm("666666","中文行吗！",function (data) {
             alert(data);
             })*/

            /*$.messager.prompt("妈的纸张","你是智障吗！",function (data) {
                alert("你是"+data);
            });*/

            $.messager.progress();
            window.setTimeout(function () {
                $.messager.progress("close");
            },3000);
        });
    </script>
</head>
<body class="easyui-layout">
    <%--每个div是一个区域--%>
    <div data-options="region: 'north', title:'xxx管理系统'" style="height: 150px">
        <a class="easyui-menubutton" data-options="menu: '#mm', iconCls : 'icon-help'">系统菜单</a>
        <%--每个div是一个菜单项--%>
        <div id="mm">
            <div>用户管理</div>
            <div>角色管理</div>
            <div class="menu-sep"></div>
            <div>部门管理</div>
        </div>
    </div>
    <div data-options="region: 'west', title:'西部区域'" style="width: 200px">
        <%--折叠面板--%>
        <div class="easyui-accordion" data-options="fit:true">
            <div data-options="iconCls: 'icon-search'" title="面板一">
                <%--js代码,添加选项卡--%>
                <script type="text/javascript">
                    function addTabs() {
                        //添选项卡
                        $("#tabs").tabs("add",{
                            iconCls: 'icon-help',
                            closable: true,
                            title: '百度',
                            content: '<iframe frameborder="0" width="100%" height="100%"' +
                            'src = "http://www.baidu.com"></iframe>'
                        });
                    }
                </script>

                <a id="baidulink" class="easyui-linkbutton" onclick="addTabs();">百度</a>
            </div>
            <div title="面板二">
                <script type="text/javascript">
                    var setting = {};
                    var zNodes = [
                        {name : '节点一',children : [{
                            name : '子节点'
                        }]},
                        {name : '节点二'},
                        {name : '节点三'}
                    ];
                    $(function () {
                        $.fn.zTree.init($("#myZtree"),setting,zNodes);
                    });
                </script>
                <ul id="myZtree" class="ztree"></ul>
            </div>
            <div title="面板三">
                <script type="text/javascript">
                    function onClick(event, treeId, treeNode, clickFlag) {
                        //alert(treeNode.name);
                        var page = treeNode.page;
                        if(page != undefined){
                            //判断当前选项卡是否存在
                            var ex = $("#tabs").tabs("exists",treeNode.name);
                            if(ex){
                                //已经存在，选中选项卡
                                $("#tabs").tabs("select",treeNode.name);
                            }else{
                                //不存在，添加
                                //动态添加选项卡面板
                                $("#tabs").tabs("add",{
                                    closable:true,
                                    title:treeNode.name,
                                    content:'<iframe frameborder="0" width="100%" height="100%" src="'+page+'"></iframe>'
                                });
                            }
                        }
                    }
                    //使用简单json的Ztree
                    var setting2 = {
                        data: {
                            simpleData: {
                                enable: true
                            }
                        },
                        callback: {
                            onClick: onClick
                        }
                    };
                    var ZNodes2 = [
                        {id : 1 ,pId : 0 , name : "父节点" ,open : true},
                        {id : 11 ,pId : 1 , name : "子节点一"},
                        {id : 12 ,pId : 1 , name : "子节点二"},
                        {id : 111 ,pId : 11 , name : "子节点11"},
                        {id : 112 ,pId : 11 , name : "子节点12"},
                        {id : 121 ,pId : 12 , name : "百度",page:'http://www.baidu.com'},//要加链接才能点
                    ];

                    $(function () {
                        $.fn.zTree.init($("#easyZtree"),setting2,ZNodes2);
                    });
                </script>
                <ul id="easyZtree" class="ztree"></ul>
            </div>
        </div>
    </div>
    <div data-options="region: 'center', title:'中部区域'">
        <div id="tabs" class="easyui-tabs" data-options="fit:true">
            <div data-options="closable:true, iconCls: 'icon-reload'" title="选项卡一">
                <%--假异步文件上传--%>
                <input type="button" value="上传" id="but1">
                <script type="text/javascript">
                    $(function () {
                        $("#but1").upload({
                            action : '${pageContext.request.contextPath}/region_importXls.action',
                            name: 'myfile'
                        })
                    });
                </script>
                <hr/>
            </div>
<%---<%------------------------------------------------------------------------------------------------------------%>
            <div data-option="closable:true, iconCls: 'icon-reload'" title="easyui数据表格">
                <table class="easyui-datagrid">
                    <thead>
                        <tr>
                            <th data-options="field:'id'">编号</th>
                            <th data-options="field:'name'">姓名</th>
                            <th data-options="field:'age'">年龄</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>001</td>
                        <td>张三</td>
                        <td>20</td>
                    </tr>
                    <tr>
                        <td>002</td>
                        <td>李四</td>
                        <td>30</td>
                    </tr>
                    <tr>
                        <td>003</td>
                        <td>王五</td>
                        <td>40</td>
                    </tr>
                </table>

                <hr/>

                <table class="easyui-datagrid"
                       data-options="url:'${pageContext.request.contextPath}/json/data.json'">
                    <thead>
                    <tr>
                        <th data-options="field:'id'">编号</th>
                        <th data-options="field:'name'">姓名</th>
                        <th data-options="field:'age'">年龄</th>
                    </tr>
                    </thead>
                </table>

                <hr/>

                <table id="grid"></table>
                <script type="text/javascript">
                    $(function(){
                        //将页面中的table变为datagrid样式
                        $("#grid").datagrid(
                            {
                                //定义表头
                                columns:[[
                                    {field:'id',title:'编号',checkbox:true},//每个json表示一列的信息
                                    {field:'name',title:'姓名'},
                                    {field:'age',title:'年龄'}
                                ]],
                                //指定一个url地址，datagrid会向这个地址发送ajax请求，获取json数据
                                url:'${pageContext.request.contextPath }/json/data.json',
                                pagination:true,//显示分页工具条
                                singleSelect:true,//只能单选
                                rownumbers:true,//显示行号
                                toolbar:[
                                    {text:'添加',iconCls:'icon-add',handler:function(){
                                        alert('添加操作');
                                    }},//每个json对应一个按钮
                                    {text:'删除',iconCls:'icon-remove'},
                                    {text:'修改',iconCls:'icon-edit'}
                                ]
                            }
                        );
                    });
                </script>
            </div>
            <%------------------------------------------------------------------------------------------------------------%>
            <div data-option="closable:true, iconCls: 'icon-reload'" title="easyui下拉列表">
                <select id="cc" class="easyui-combobox" name="dept" style="width: 200px">
                    <option value="aa">aa</option>
                    <option value="bb">bb</option>
                    <option value="cc">cc</option>
                    <option value="dd">dd</option>
                    <option value="ee">ee</option>
                </select>

                <hr/>

                <input data-options="valueField:'id',textField:'name',url:'${pageContext.request.contextPath}/json/data.json'"
                    class="easyui-combobox" type="text" name="dept"/>

                <hr/>

                <input type="text" id="test">
                <script type="text/javascript">
                    $(function(){
                        $("#test").combobox({
                            valueField:'id',
                            textField:'name',
                            url:'${pageContext.request.contextPath}/json/data.json'
                        });
                    });
                </script>
            </div>
        </div>
    </div>
    <div data-options="region: 'east', title:'东部区域'" style="width: 100px">东部区域</div>
    <div data-options="region: 'south', title:'南部区域'" style="height: 50px">南部区域</div>
</body>
</html>
